<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        欢迎界面
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/main.css" media="all">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.js" media="all">
</head>
<body>
<style type="text/css">
    legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
    legend a{ color:#666;} legend a:hover{ text-decoration:none;}
    .icon {
        width: 6em;
        height: 6em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
<div class="x-body">
    <blockquote class="layui-elem-quote">
        欢迎使用小区物业管理系统！<span class="f-14">v1.0</span> &nbsp;&nbsp;
    </blockquote>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol col-lg-6 ">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zongfeiyong"></use>
                    </svg>
                </div>
                <div class="col-lg-6 " >
                    <h1 id="zfy"></h1>
                    <span>总费用</span>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">

                <div class="symbol col-lg-6">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuifei"></use>
                    </svg>
                </div>
                <div class="col-lg-6" bind="1">
                    <h1 id="zsf"></h1>
                    <span>水费总计</span>
                </div>

            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol col-lg-6">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianfei"></use>
                    </svg>
                </div>
                <div class="col-lg-6" bind="1">
                    <h1 id="zdf"></h1>
                    <span>电费总计</span>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol col-lg-6">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wuyefei"></use>
                    </svg>
                </div>
                <div class="col-lg-6" bind="1">
                    <h1 id="zwyf"></h1>
                    <span>物业费总计</span>
                </div>
            </section>
        </div>

    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">信息统计</a></legend>
    </fieldset>

    <!--相关统计-->
    <div class="row">
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">费用总占比</div>
                <div class="panel-body">
                    <div class="echarts" id="main1" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">水费</div>
                <div class="panel-body">
                    <div class="echarts" id="main2" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>

        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">电费</div>
                <div class="panel-body">
                    <div class="echarts" id="main3" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">物业费</div>
                <div class="panel-body">
                    <div class="echarts" id="main4" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>


    </div>

    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/iconfont.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        $(window).on('load',function() {
            let item = localStorage.getItem("code");
            if (item != 0) {
                window.location.href = "/login.jsp"
            }
            $.ajax({
                url: "http://localhost:8888/hy-welcome/selectUserOrderByBillType",
                dataType: "json",
                success: function (ss) {
                    $("#zsf").html(ss[0].water);
                    $("#zdf").html(ss[0].ele);
                    $("#zwyf").html(ss[0].wuye);
                    $("#zfy").html(ss[0].cost);
                }
            });
        });


        $.ajax({
            url:"${pageContext.request.contextPath}/hy-welcome/selectUserOrderByBillType",
            dataType:"json",
            type:"post",
            success:function(data){
                var chartDom = document.getElementById('main1');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '费用类别',
                            type: 'pie',
                            radius: '70%',
                            data: [
                                {value: data[0].water, name: '水费'},
                                {value: data[0].ele, name: '电费'},
                                {value: data[0].wuye, name: '物业费'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);

            }
        });

        $.ajax({
            url:"${pageContext.request.contextPath}/hy-welcome/selectUserTu",
            dataType:"json",
            type:"post",
            success:function(data){
                var chartDom = document.getElementById('main2');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [data[0].water,data[1].water,data[2].water,data[3].water,data[4].water,data[5].water,data[6].water,data[7].water,data[8].water,data[9].water,data[10].water,data[11].water],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,  //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {  //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }]
                };
                option && myChart.setOption(option);
            }
        });

        $.ajax({
            url:"${pageContext.request.contextPath}/hy-welcome/selectUserTu",
            dataType:"json",
            type:"post",
            success:function(data){
                var chartDom = document.getElementById('main3');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [data[0].ele,data[1].ele,data[2].ele,data[3].ele,data[4].ele,data[5].ele,data[6].ele,data[7].ele,data[8].ele,data[9].ele,data[10].ele,data[11].ele],
                        type: 'line',
                        smooth: true,
                        itemStyle : { normal: {label : {show: true}}}
                    }]
                };

                option && myChart.setOption(option);
            }
        });

        $.ajax({
            url:"${pageContext.request.contextPath}/hy-welcome/selectUserTu",
            dataType:"json",
            type:"post",
            success:function(data){
                var chartDom = document.getElementById('main4');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '物业费',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: data[0].wuye, name: '1月'},
                                {value: data[1].wuye, name: '2月'},
                                {value: data[2].wuye, name: '3月'},
                                {value: data[3].wuye, name: '4月'},
                                {value: data[4].wuye, name: '5月'},
                                {value: data[5].wuye, name: '6月'},
                                {value: data[6].wuye, name: '7月'},
                                {value: data[7].wuye, name: '8月'},
                                {value: data[8].wuye, name: '9月'},
                                {value: data[9].wuye, name: '10月'},
                                {value: data[10].wuye, name: '11月'},
                                {value: data[11].wuye, name: '12月'},
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);

            }
        });


    </script>

</div>

<div class="layui-footer footer footer-demo">
    <div class="layui-main">
        <p>
            <a href="/">
                @2021.05 小区物业管理系统
            </a>
        </p>

    </div>
</div>

</body>
</html>